<html>
  <head>
    <title>Tab switcher options</title>
    <script type="text/javascript">
    var intervalProbingId = "intervalProbing";
    var intervalProbingKey = "interval_probing";

      // Saves options to localStorage.
    function save_options() {
      var select = document.getElementById(intervalProbingId);
      var interval = select.children[select.selectedIndex].value;
      localStorage[intervalProbingKey] = parseInt(interval);

      // Update status to let user know options were saved.
      var status = document.getElementById("status");
      status.innerHTML = "Options Saved.";
      setTimeout(function() {
          status.innerHTML = "";
          }, 1750);
    }

    // Restores select box state to saved value from localStorage.
    function restore_options() {
      var interval = localStorage[intervalProbingKey];
      if (!interval) {
        return;
      }
      var select = document.getElementById(intervalProbingId);
      for (var i = 0; i < select.children.length; i++) {
        var child = select.children[i];
        if (parseInt(child.value) == interval) {
          child.selected = "true";
          break;
        }
      }
    }
  </script>

  <style type="text/css">
    div.container {
      width:600px;
      margin: 0 auto;
      height: 400px;
      border-top: 3px solid #C3D9FF;
      background-color: #EFF5FF;
    }
    div.contentcontainer {
      margin:0 auto;
      width: 400px;
      margin-top:40px;
    }
    div.optionscontainer {
      margin-bottom:10px;
    }
  </style>
</head>

<body onload="restore_options()">
  <div class="container">
    <center><h2>Options</h2></center>
    <div class="contentcontainer">
      <div class="optionscontainer">
        Tab probing interval (ms)
        <select id="intervalProbing" style="margin-left:20px;">
          <option value="50">50</option>
          <option value="100">100</option>
          <option value="200">200</option>
          <option value="300">300</option>
          <option value="400">400</option>
          <option value="500">500</option>
        </select>
      </div>
      <button onclick="save_options()" style="display:block;">Save</button>
      <div id="status"></div>
    </div>
  </div>

</body>
</html>

